<template>
  <div class="campaign_report">
    <a :href="`${baseUrl}/marketing/activity/manager/exportData?activityId=${id}&UBToken=${UBToken}`" download>导出数据</a>
    <h3>总部数据</h3>
    <el-table
      v-loading="loading1"
      element-loading-text="拼命加载中"
      :data="reportData1">
      <el-table-column label="分公司" fixed prop="departmentName"></el-table-column>
      <el-table-column label="分部"></el-table-column>
      <el-table-column label="渠道"></el-table-column>
      <el-table-column label="主体数量 (可分发人数量)" width="120"></el-table-column>
      <el-table-column label="推广人数量(可分发人数量)" width="130"></el-table-column>
      <el-table-column label="浏览数PV" prop="pv"></el-table-column>
      <el-table-column label="用户数UV" prop="uv"></el-table-column>
      <el-table-column label="总认筹数" prop="allSubmit"></el-table-column>
      <el-table-column label="总核销数" prop="allUse"></el-table-column>
      <el-table-column label="朋友圈浏览量" prop="sourceTimeLine"></el-table-column>
      <el-table-column label="朋友圈预定数" prop="sourceTimelineSubmit"></el-table-column>
      <el-table-column label="微信群浏览量" prop="sourceSingleMessage"></el-table-column>
      <el-table-column label="微信群预定数" prop="sourceSingleSubmit"></el-table-column>
      <el-table-column label="海报浏览量" prop="sourcePoster"></el-table-column>
      <el-table-column label="海报预定数" prop="sourcePosterSubmit"></el-table-column>
      <el-table-column label="关注公众号总数"></el-table-column>
    </el-table>
    <h3>主体数据</h3>
    <el-table
      v-loading="loading2"
      element-loading-text="拼命加载中"
      :data="reportData2">
      <el-table-column label="分公司" fixed prop="departmentName"></el-table-column>
      <el-table-column label="分部"></el-table-column>
      <el-table-column label="渠道"></el-table-column>
      <el-table-column label="推广人ID" prop="userId"></el-table-column>
      <el-table-column label="主体名(可分发人门店或机构名)" width="140"></el-table-column>
      <el-table-column label="销售代表名字" prop="username"></el-table-column>
      <el-table-column label="推广人名(可分发人人名)" width="120"></el-table-column>
      <el-table-column label="电话" prop="mobile" width="130"></el-table-column>
      <el-table-column label="地址" prop="address" width="200"></el-table-column>
      <el-table-column label="浏览量PV" prop="pv"></el-table-column>
      <el-table-column label="用户数UV" prop="uv"></el-table-column>
      <el-table-column label="认筹数" prop="submitNum"></el-table-column>
      <el-table-column label="核销数" prop="useNum"></el-table-column>
      <el-table-column label="活动发起时间" prop="startTime" width="190">
        <template slot-scope="scope">
          {{dateFormat(scope.row.startTime)}}
        </template>
      </el-table-column>
      <el-table-column label="朋友圈浏览量"></el-table-column>
      <el-table-column label="朋友圈预定数"></el-table-column>
      <el-table-column label="微信群浏览量"></el-table-column>
      <el-table-column label="微信群预定数"></el-table-column>
      <el-table-column label="海报浏览量"></el-table-column>
      <el-table-column label="海报预定数"></el-table-column>
    </el-table>
    <h3>认筹明细</h3>
    <el-table
      v-loading="loading3"
      element-loading-text="拼命加载中"
      :data="reportData3">
      <el-table-column label="分公司" prop="departmentName"></el-table-column>
      <el-table-column label="分部"></el-table-column>
      <el-table-column label="渠道"></el-table-column>
      <el-table-column label="推广人ID" prop="tUserId"></el-table-column>
      <el-table-column label="定制主体名"></el-table-column>
      <el-table-column label="推广人名"></el-table-column>
      <el-table-column label="用户CARDOPENID" prop="cardOpenID" width="160"></el-table-column>
      <el-table-column label="用户PAYOPENID" prop="payOpenid" width="160"></el-table-column>
      <el-table-column label="用户名" prop="buyerRealname"></el-table-column>
      <el-table-column label="用户电话" prop="buyerMobile" width="130"></el-table-column>
      <el-table-column label="认筹时间" prop="submitTime"></el-table-column>
      <el-table-column label="核销时间" prop="useTime" width="120">
        <template slot-scope="scope">
          {{dateFormat(scope.row.useTime)}}
        </template>
      </el-table-column>
      <el-table-column label="核销人OPENID" prop="useUserid"></el-table-column>
      <el-table-column label="核销人" prop="useUsername"></el-table-column>
      <el-table-column label="核销主体"></el-table-column>
    </el-table>
  </div>
</template>
<script>
  import {mapState, mapActions} from 'vuex'
  import env from '@/config/env'
  export default {
    data () {
      return {
        id: this.$route.params.id,
        UBToken: localStorage.getItem('UBToken'),
        loading1: false,
        loading2: false,
        loading3:false
      }
    },
    mounted () {
      this.initPage()
    },
    computed: {
      ...mapState({
        reportData1: state => state.campaignList.reportData1,
        reportData2: state => state.campaignList.reportData2,
        reportData3: state => state.campaignList.reportData3
      }),
      baseUrl () {
        return env.baseUrl3
      }
    },
    methods: {
      ...mapActions(['getCampaignReport1', 'getCampaignReport2', 'getCampaignReport3']),
      async initPage () {
        this.loading1 = this.loading2 = this.loading3 = true
        const p1 = this.getCampaignReport1({activityId: this.id})
        const p2 = this.getCampaignReport2({activityId: this.id})
        const p3 = this.getCampaignReport3({activityId: this.id})
        await p1
        this.loading1 = false
        await p2
        this.loading2 = false
        await p3
        this.loading3 = false
      },
      // 日期格式化
      dateFormat (date) {
        if(date){
          return this.$date.format(new Date(date), 'YYYY-MM-DD HH:mm:ss')
        }
      }
    }
  }
</script>
<style lang="scss">
  .campaign_report{
    h3{margin-bottom:5px;font-size:18px}
    .el-table{margin-bottom:15px;}
  }
</style>